<template>
    <el-dialog title="公司标准" :visible="visible" width="1500px" @close="onClose" @open="onOpen">
        <div class="template_box">
            <Template1 v-if="config.templateIndex === '1'" ref="template1" :templateData="templateData"/>
            <Template2 v-if="config.templateIndex === '2'" ref="template2" :templateData="templateData"/>
            <Template3 v-if="config.templateIndex === '3'" ref="template3" :templateData="templateData"/>
            <Template4 v-if="config.templateIndex === '4'" ref="template4" :templateData="templateData"/>
            <Template5 v-if="config.templateIndex === '5'" ref="template5" :templateData="templateData"/>
            <Template6 v-if="config.templateIndex === '6'" ref="template6" :templateData="templateData"/>
            <Template7 v-if="config.templateIndex === '7'" ref="template7" :templateData="templateData"/>
            <Template8 v-if="config.templateIndex === '8'" ref="template8" :templateData="templateData"/>
            <Template9 v-if="config.templateIndex === '9'" ref="template9" :templateData="templateData"/>
            <Template10 v-if="config.templateIndex === '10'" ref="template10" :templateData="templateData"/>
            <div class="template_box_wrap"></div>
        </div>

        <span slot="footer" class="dialog-footer">
            <el-button class="bottom_all_two" @click="onClose">关 闭</el-button>
        </span>
    </el-dialog>
</template>

<script>
    import { getQualityDetection1 } from "@/api/qualityTemplate"
    import Template1 from "./Template1";
    import Template2 from "./Template2";
    import Template3 from "./Template3";
    import Template4 from "./Template4";
    import Template5 from "./Template5";
    import Template6 from "./Template6";
    import Template7 from "./Template7";
    import Template8 from "./Template8";
    import Template9 from "./Template9";
    import Template10 from "./Template10";

    export default {
        components: {
            Template1,
            Template2,
            Template3,
            Template4,
            Template5,
            Template6,
            Template7,
            Template8,
            Template9,
            Template10,
        },
        data() {
            return {
                templateData: {}
            };
        },
        props: {
            config: {
                type: Object,
                default: () => ({templateIndex: 1}),
            },
            // 控制dialog显示
            visible: {
                type: Boolean,
            },
        },
        methods: {
            onOpen() {
                const params = {
                    companyId: this.config.companyId,
                    nameId: this.config.nameId,
                    specificationId: this.config.specificationId,
                    type: 1,
                }
                getQualityDetection1(params).then(res=>{
                    if(res.data && res.code === 1001) {
                        this.templateData = JSON.parse(res.data.tableSetting).myData || null
                    }
                })
            },
            onClose() {
                this.$emit('update:visible', false);
            }
        },
    };
</script>

<style lang="scss" scoped>
.template_box {
    width: 100%;
    max-height: 580px;
    overflow-y: auto;
    display: flex;
    justify-content: center;
    position: relative;

    .template_box_wrap {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 99999;
    }
}
</style>
